var xsdDisplayer;

$("#xml").treeview({
	animated : "fast",
	persist : "cookie"
});


/* Contextual menu */
$(function() {
	$.contextMenu({
		selector : '.complex-type',
		trigger : 'left',
		callback : function(key, options) {
			var m = "clicked: " + key;
			window.console && console.log(m) || alert(m);
		},
		items : {
			"addChild" : {
				name : "Add Child",
				icon : "add",
				callback: function(key, options) {
					$("#add-form-div").modal();
					var nodeId = this[0].id;
					createInsertChild(nodeId, this[0].parentNode);
				}
			},
			"delete" : {
				name : "Delete",
				icon : "delete",
				callback: function(key, options){
					var nodeId = this[0].id;
				}
			},
		}
	});
	$.contextMenu({
		selector : '.simple-type',
		trigger : 'left',
		callback : function(key, options) {
			var m = "clicked: " + key;
			window.console && console.log(m) || alert(m);
		},
		items : {
			"edit" : {
				name : "Edit",
				icon : "edit",
				callback : function(key, options) {
					$("#edit-form-div").modal();
					// generate info of clicked XML node and put it into edit modal
					var nodeId = this[0].id;
				}
			},
			"delete" : {
				name : "Delete",
				icon : "delete",
				callback: function(key, options){
					var nodeId = this[0].id;
				}
			},
		}
	});

});

$.ui.plugin
		.add(
				"resizable",
				"alsoResizeReverse",
				{

					start : function(event, ui) {

						var self = $(this).data("uiResizable"), o = self.options;

						var _store = function(exp) {
							$(exp).each(function() {
								$(this).data("resizable-alsoresize-reverse", {
									width : parseInt($(this).width(), 10),
									height : parseInt($(this).height(), 10),
									left : parseInt($(this).css('left'), 10),
									top : parseInt($(this).css('top'), 10)
								});
							});
						};

						if (typeof (o.alsoResizeReverse) == 'object'
								&& !o.alsoResizeReverse.parentNode) {
							if (o.alsoResizeReverse.length) {
								o.alsoResize = o.alsoResizeReverse[0];
								_store(o.alsoResizeReverse);
							} else {
								$.each(o.alsoResizeReverse, function(exp, c) {
									_store(exp);
								});
							}
						} else {
							_store(o.alsoResizeReverse);
						}
					},

					resize : function(event, ui) {
						var self = $(this).data("uiResizable"), o = self.options, os = self.originalSize, op = self.originalPosition;

						var delta = {
							height : (self.size.height - os.height) || 0,
							width : (self.size.width - os.width) || 0,
							top : (self.position.top - op.top) || 0,
							left : (self.position.left - op.left) || 0
						},

						_alsoResizeReverse = function(exp, c) {
							$(exp)
									.each(
											function() {
												var el = $(this), start = $(
														this)
														.data(
																"resizable-alsoresize-reverse"), style = {}, css = c
														&& c.length ? c : [
														'width', 'height',
														'top', 'left' ];

												$
														.each(
																css
																		|| [
																				'width',
																				'height',
																				'top',
																				'left' ],
																function(i,
																		prop) {
																	var sum = (start[prop] || 0)
																			- (delta[prop] || 0);
																	if (sum
																			&& sum >= 0)
																		style[prop] = sum
																				|| null;
																});

												// Opera fixing relative
												// position
												if (/relative/.test(el
														.css('position'))
														&& $.browser.opera) {
													self._revertToRelativePosition = true;
													el.css({
														position : 'absolute',
														top : 'auto',
														left : 'auto'
													});
												}

												el.css(style);
											});
						};

						if (typeof (o.alsoResizeReverse) == 'object'
								&& !o.alsoResizeReverse.nodeType) {
							$.each(o.alsoResizeReverse, function(exp, c) {
								_alsoResizeReverse(exp, c);
							});
						} else {
							_alsoResizeReverse(o.alsoResizeReverse);
						}
					},

					stop : function(event, ui) {
						var self = $(this).data("uiResizable");

						// Opera fixing relative position
						if (self._revertToRelativePosition && $.browser.opera) {
							self._revertToRelativePosition = false;
							el.css({
								position : 'relative'
							});
						}

						$(this).removeData("resizable-alsoresize-reverse");

						/*
						 * this is to be changed when xsdDisplayer changed its
						 * name
						 */
						xsdDisplayer.resize();
					}
				});

$(document).ready(function() {
	setNewWidthForXMLArea();
	xsdDisplayer = ace.edit("textarea-xsd");
	// xsdDisplayer.setTheme("ace/theme/twilight");
	xsdDisplayer.setReadOnly(true);
	xsdDisplayer.getSession().setMode("ace/mode/xml");
	$("#textarea-xsd").resizable({
		alsoResizeReverse : "#textarea-xml",
		handles : 'e',
		minWidth : $("#textarea-xsd").width(),
		maxWidth : 800
	});
});

function setNewWidthForXMLArea() {
	var newWidth = $(window).width() - $("#textarea-xsd").width() - 60;
	$("#textarea-xml").width(newWidth);
}